<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(${detail.name})"></head>
<body onload="queryArticle(1)">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(2)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4"><p class="lh-1">专栏</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/column/list}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>所有专栏
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/column}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>新增专栏
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm align-items-center">
                                    <div class="col-auto">
                                        <span class="avatar avatar-lg" th:style="'background-image: url(' +  ${detail.image} + ')'"></span>
                                    </div>
                                    <div class="col">
                                        <h4 class="card-title m-0">
                                            <a href="#" th:text="${detail.name}">专栏名：Redis</a>
                                        </h4>
                                        <div class="text-muted">
                                            共&nbsp;<a class="text-green" style="cursor:pointer;">[[${detail.subscribeNum}]]</a>&nbsp;人订阅
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block" onclick="addArticle(this)" th:attr="columnId=${detail.id},columnName=${detail.name}">
                                            添加文章
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" th:value="${detail.id}" id="columnId"/>
                            <div class="card-header">
                                <h3 class="card-title">已添加文章</h3>
                            </div>
                            <!--专栏内文章列表-->
                            <div class="card-body" id="articleFragment"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true"></div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
    let currentColumnId = "";
    function addArticle(ele) {
        currentColumnId = $(ele).attr("columnId");
        $.ajax({
            type: "get",
            url: "/admin/column/item/list",
            data: {"columnId": currentColumnId},
            success: function (data) {
                console.log(data);
                $("#modal-report").html(data);
                $("#modal-report").modal('show');
                currentColumnId = "";
                currentColumnName = "";
            },
            error: function (data) {
                currentColumnId = "";
                currentColumnName = "";
            }
        })
    }
    function deleteArticle(ele) {
        $.ajax({
            type: "post",
            url: "/admin/column/item/" + $(ele).attr("itemId"),
            success: function (data) {
                if (data.code == 200) {
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                }
            },
            error: function (data) {
                $("#alert-fail").fadeIn();
            }
        })
    }

    function reduceOrAddSort(ele, flag) {
        let itemId = $(ele).parent().parent().attr("itemId");
        let sortNum = document.getElementById("sortNum" + itemId).innerText;
        if (sortNum == 0 && !flag) {
            return false;
        }
        $.ajax({
            type: "post",
            url: "/admin/column/item/sort",
            data: {
                "id": itemId,
                "sort": flag
            },
            success: function (data) {
                if (data.code == 200) {
                    queryArticle(1);
                }
            }
        })
    }

    function queryArticle(page) {
        let columnId = document.getElementById("columnId").value;
        var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', "/admin/column/item?columnId=" + columnId + '&page=' + page, true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var data = httpRequest.responseText;//获取到json字符串，还需解析
                document.getElementById("articleFragment").innerHTML = data;
            }
        };
    }
    function showDetail(ele) {
        $.ajax({
            type: "get",
            url: "/admin/article/" + $(ele).attr("articleId"),
            success: function (data) {
                $("#modal-report").html(data);
                $("#modal-report").modal('show');
            },
            error: function () {
            }
        })
    }
</script>
</body>
</html>